:root {
    --gray: #8F95AB;
    --blue1: #5A6DB1;
    --blue2: #324BA7;
    --blue3: #009AD9;
    --font-size: 11px;
    --gray2:rgb(226, 226, 228)B;
}

@font-face {
    font-family: 'Sherlyn';
    src: url("../fonts/Sherlyn.otf") format("opentype");
}

@font-face {
    font-family: 'Urae Nium';
    src: url('../fonts/urae_nium.ttf');
}

.ici-text {
    font-family: 'Urae Nium';
 
}
.fs-100{
    font-size:100px;
}
.ici-some-text {
    font-family: 'Sherlyn';
   
}
.fs-150{
    font-size:150px;
}
html {
    scroll-behavior: smooth
}

body {
    font-family: 'Montserrat', sans-serif;
}

.bg {
    background: rgb(9, 40, 146);
    background: linear-gradient(0deg, rgba(9, 40, 146, 1) 0%, rgba(177, 191, 236, 1) 31%, rgba(255, 255, 255, 1) 71%);

}

#t-color {
    color: var(--blue3) !important;
}

.beyond,
.navbar-brand, .iccolor {
    color: #009AD9 !important;
}

.nav-link {
    color: white !important
}

.text-promotion {
    font-size: 50px;
    font-weight: bold;
}

.going {
    color: var(--gray);
}

.above {
    color: var(--blue1);
}

.and {
    color: var(--blue2);
}

.mt-100 {
    margin-top: 100px;
}
@media screen and (max-width:500px) {
    .mt-100 {
        margin-top: 20px;
    }
}

.mt-150 {
    margin-top: 150px;
}

@media screen and (max-width:500px) {
    .mt-150 {
        margin-top: 20px;
    }
}

.mb-100 {
    margin-bottom: 100px;
}
@media screen and (max-width:500px) {
    .mb-100 {
        margin-bottom: 20px;
    }
}

.text-mv {
    font-size: 18px;
}

#vision,
#mission,
#footer {
    margin-top: 50px;
}

#vision .text-promotion,
#mission .text-promotion {
    margin-top: 12vh;
}

.mt-50 {
    margin-top: 150px;
}

@media screen and (max-width:600px) {
    .mt-150 {
        margin-top: 40px !important;
    }
}

.institution-link-header {
    color: #13245d;
    font-weight: bold;
}

.institution-level-label {
    color: #13245d;
    text-align: center;
}

.cards:hover  {
    opacity: 0.5;
}



a {
    background: linear-gradient(0deg, WHITE, #5A6DB1) no-repeat right bottom / 0 var(--bg-h);
    transition: background-size 350ms;
    --bg-h: 100%;
}

a:where(:hover, :focus-visible) {
    background-size: 100% var(--bg-h);
    background-position-x: left;
}

.underline {
    padding-bottom: 2px;
    --bg-h: 2px;
}

.none {
    padding-bottom: 0px;
    --bg-h: 0px;
}

a {
    text-decoration: none;
    color: inherit;
    line-height: 1;
}

.carousel-inner,
.cimg {
    width: 100%;
    max-height: 65vh;
    object-fit: cover
}

.bg-2 {
    background-color: #F6F7FD;
}

.bg-3 {
    background-color:  var(--blue3);

}

.bg-footer {
    background-color: #009AD9;
}

.ica_card {
    height: 350px
}